﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>传递多个值</title>
</head>
<body>
<div id="app">
    <!--使用blog-content组件-->
    <blog-content></blog-content>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    const vm = Vue.createApp({});

    vm.component('blog-content', {
        // 使用blog-title组件，并传递content
        template: '<div><blog-title :name="name" :price="price" :num="num"></blog-title></div>',
        data: function() {
            return {
                name: "苹果",
                price: "6.88元",
                num: "2800公斤"
            }
        }
    });

    vm.component('blog-title', {
        props: ['name', 'price', 'num'],
        template: '<ul><li>{{name}}</li><li>{{price}}</li><li>{{num}}</li></ul>'
    })

    vm.mount('#app');
</script>
</body>
</html>
